<template>
  <div class="applyItem">
    <div class="header">
      <div class="apply-content">
        <span>公司名称：{{params.businessName}}   </span>
        <span>公司编码：{{params.businessCode}}</span>
        <span>授 权 ID：{{ params.appid }}</span>
        <span>认证密钥：
          <el-popover
              placement="top-start"
              title="密钥"
              width="200"
              trigger="hover"
              :content="params.appkey">
            <span  slot="reference" class="apikey">{{ params.appkey }}</span>
          </el-popover>
        </span>
        <span v-if="params.status == 1 && params.auditStatus == 1">审核状态：需审核</span>

      </div>
      <div class="btnBox1">
        <span class="more" v-if="params.auditStatus != 0" @click="goDetial"><i class="el-icon-s-operation"></i>展开</span>
        <el-button type="danger" class="btn" size="small" @click="goClose" v-if="params.status == 1">停用</el-button>
        <el-button type="primary"  class="btn" size="small" @click="goOpen" v-if="params.status == 2">启用</el-button>
        <el-button type="primary"  class="btn" size="small" @click="goPass" v-if="params.status == 0">通过申请</el-button>
        <el-button type="danger"  class="btn" size="small" @click="goReject" v-if="params.status == 0">拒绝申请</el-button>
      </div>

    </div>
    <div class="apply-body" v-if="show">
      <systemMenu :hasBtn="false" @node-select="nodeSelect"></systemMenu>
      <div class="contentBox">
        <searchForm :keys="['aname']" ref="searchForm" @on-search="onSearch"></searchForm>
        <div class="table">
          <el-table
              :data="showTableData"
              v-loading="loading"
              :header-cell-style="{background:'#F8F9FA'}"
              border
              style="width: 100%">
            <el-table-column
                width="55">
              <template slot-scope="scope">
                <el-checkbox :checked="scope.row.checked"  @change="(v)=>{scope.row.checked = v}"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
                prop="url"
                label="API URL">
            </el-table-column>
            <el-table-column
                prop="name"
                label="API名称">
            </el-table-column>
            <el-table-column
                prop="code"
                label="API编码"
                width="">
            </el-table-column>
            <el-table-column
                prop="method"
                label="请求方式"
                width="">
            </el-table-column>
            <el-table-column
                prop="authCode"
                label="权限编码"
                width="">
            </el-table-column>
            <el-table-column
                prop="createdByName"
                label="创建人"
                width="">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="btnBox" v-if="show && params.auditStatus ==1">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import systemMenu from "@/views/APImanage/module/systemMenu";
import searchForm from "@/views/APImanage/module/searchForm";
export default {
  name: "applyItem",
  props:{
    params:{
      default:()=>{}
    },
  },
  methods:{
    submit(){
      let params = {
        "apiApplyInfoPO": this.allDataList.filter(x=>{return x.checked == true}).map(x=>{
          return {
            id:x.id,
            status:x.checked?2:1
          }
        }),
        "id": this.params.id,
        "remark": ""
      }
      this.$api.dealApplyApiService(params).then(res=>{
        this.$message.success('提交成功')
        this.$emit('after-op')
      })
    },
    onSearch(){
      this.showTableData = this.tableData.filter(x=>{
        return x.name.includes(this.$refs.searchForm.form.name)
      })
    },
    nodeSelect(item){
      this.tableData = []
      this.showTableData = []
      this.loading = true
      setTimeout(()=>{
        this.loading = false
        this.tableData = this.dataMap[item.name] || []
        this.showTableData = [...this.tableData]
      },300)
    },
    goDetial(){
      this.show = !this.show
      if(this.show){
        let obj = {}
        this.params.apiApplicationSystem.forEach(x=>{
          x.apiApplicationMethodPOS.forEach(y=>{
            y.checked = y.status == 1
          })
          this.allDataList = [...this.allDataList,...x.apiApplicationMethodPOS]
          obj[x.system] = x.apiApplicationMethodPOS
        })
        obj['模块架构'] = [...this.allDataList]
        this.dataMap = obj

      }
    },
    goClose(){
      $confirm('确认关闭').then(res=>{
        this.$api.closeSecret({id:this.params.id}).then(res=>{
          this.$message.success('操作成功')
          this.$emit('after-op')
        })
      })

    },
    goOpen(){
      $confirm('确认开启').then(res=>{
        this.$api.openSecret({id:this.params.id}).then(res=>{
          this.$message.success('操作成功')
          this.$emit('after-op')
        })
      })
    },
    goPass(){
      this.$prompt('请输入备注', '通过申请', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let params = {
          "auditRemark": value,
          "id": this.params.id,
          "status": 1
        }
        this.$api.dealApplication(params).then(res=>{
          this.$message.success('通过申请')
          this.$emit('after-op')
        })
      }).catch(() => {

      });
    },
    goReject(){
      this.$prompt('请输入备注', '拒绝申请', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let params = {
          "auditRemark": value,
          "id": this.params.id,
          "status": 2
        }
        this.$api.dealApplication(params).then(res=>{
          this.$message.success('已拒绝申请')
          this.$emit('after-op')
        })
      }).catch(() => {

      });
    },
  },
  components:{
    systemMenu,searchForm
  },
  data(){
    return {
      tableData:[],
      showTableData:[],
      loading:false,
      show:false,
      dataMap:{},
      allDataList:[]
    }
  },
}
</script>

<style scoped lang="less">
/deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
  background-color: #409EFF;
  border-color: #409EFF;
}
/deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
  border-color: white;
}
.btnBox1{
  width: 300px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  .more{
    margin-left: 10px;
  }
}
.applyItem{
  width: calc(100% - 2px);
  border: 1px solid #EEEEEE;
  .header{
    height: 61px;
    padding:  0 15px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;
    .apply-content{
      height: 61px;
      display: flex;
      align-items: center;
      span{
        margin-right: 40px;
        display: flex;
        align-items: center;
      }
      .apikey{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        margin-top: 7px;
        width: 100px;
      }
    }
  }
  .apply-body{
    display: flex;
    width: calc(100% - 30px);
    margin: 15px;
    border: 1px solid #EEEEEE;
    .contentBox{
      width: calc(100% - 200px)
    }
  }
  .btnBox{
    padding: 15px;
    width:  calc(100% - 30px);
    display: flex;
    flex-direction: row-reverse;

  }

}
</style>